<template>
    <el-form v-if="!type" ref="ruleFormRef" style="width: 100%" :model="ruleForm" :rules="rules" label-width="auto" :size="formSize" status-icon >
        <el-descriptions :column="3" border >
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">姓名　　　</div>
                </template>
                <el-text>{{ ruleForm.id ? ruleForm.user.name : user.name }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">部门(项目)</div>
                </template>
                <div style="width: 200px;"><component :is="projectSelect" :data=ruleForm.project_id @onProjectSelect="onProjectSelect" /></div>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">职务　　　</div>
                </template>
                <el-input v-model="ruleForm.position" />
            </el-descriptions-item>
            <el-descriptions-item :span="3">
                <template #label>
                    <div class="cell-item">请假类型</div>
                </template>
                <el-radio-group v-model="ruleForm.type">
                    <el-radio value="事假">事假</el-radio>
                    <el-radio value="病假">病假</el-radio>
                    <el-radio value="婚假">婚假</el-radio>
                    <el-radio value="丧假">丧假</el-radio>
                    <el-radio value="工伤">工伤</el-radio>
                    <el-radio value="产假">产假</el-radio>
                    <el-radio value="护理假">护理假</el-radio>
                    <el-radio value="其他">其他</el-radio>
                </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item :span="3">
                <template #label>
                    <div class="cell-item">请假事由</div>
                </template>
                <el-input v-model="ruleForm.reason" type="textarea" :autosize="{ minRows: 4 }" />
            </el-descriptions-item>
            <el-descriptions-item :span="3">
                <template #label>
                    <div class="cell-item">请假时间</div>
                </template>
                <el-row >
                    <el-col :span="6">
                        <el-date-picker style="width: 100%" @change="onChangeDate" v-model="ruleForm.start_time" type="datetime" value-format="YYYY-MM-DD HH:mm" placeholder="请选择日期" />
                    </el-col>
                    <el-col :span="1">
                            <div class="text-center" style="line-height: 40px;">至</div>
                    </el-col>
                    <el-col :span="6">
                        <el-date-picker style="width: 100%" @change="onChangeDate" v-model="ruleForm.end_time" type="datetime" value-format="YYYY-MM-DD HH:mm" placeholder="请选择日期" />
                    </el-col>
                    <el-col :span="2">
                            <div class="text-center" style="line-height: 40px;">共计 {{ ruleForm.duration }} 天</div>
                    </el-col>
                </el-row>
            </el-descriptions-item>
        </el-descriptions>
        <el-form-item label="备注" >
            <div><el-text>1.有薪假必须出具相关证明，且需综合办审核确认（若请假时未出具证明，则需再填写《有薪假申请单》附证明进行有薪假申请审批；</el-text></div>
            <div><el-text>2.请假单分为存根与正本，存根由企管部存档，作为统计考勤时的依据，正本由员工所在部门存档，作为考勤疑问核对的依据；</el-text></div>
            <div><el-text>3.有薪假的相关证明复印件作为请假单附件一起存档。</el-text></div>
        </el-form-item>
        <el-divider />
        <div class="text-center">
            <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
            <el-button @click="printElement('')"> 打印预览 </el-button>
        </div>
    </el-form>
    
    <div v-else >
        <div id="print" class="print">
            <h2 class="text-center">付款 报销申请单</h2>
            <div class="text-right">填写时间：{{ ruleForm.created_at }}</div>
            <el-descriptions :column="3" border >
                <el-descriptions-item label-class-name="my-label" class-name="my-content">
                    <template #label>
                        <div class="cell-item">姓名　　　</div>
                    </template>
                    <div class="w-f"><el-text>{{ ruleForm.user.name }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label" class-name="my-content">
                    <template #label>
                        <div class="cell-item">部门(项目)</div>
                    </template>
                    <el-text>{{ ruleForm.project.title }}</el-text>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label" class-name="my-content">
                    <template #label>
                        <div class="cell-item">职务　　　</div>
                    </template>
                    <div class="w-f"><el-text>{{ ruleForm.position }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label" class-name="my-content" :span="3">
                    <template #label>
                        <div class="cell-item">请假类别　</div>
                    </template>
                    <div>
                        
                        <el-text>
                            <el-icon v-if="ruleForm.type == '事假'"><SuccessFilled /></el-icon>
                            <el-checkbox v-else /> 事假
                        </el-text>
                        <el-text>
                            　　<el-icon v-if="ruleForm.type == '病假'"><SuccessFilled /></el-icon>
                            <el-checkbox v-else /> 病假
                        </el-text>
                        <el-text>
                            　　<el-icon v-if="ruleForm.type == '婚假'"><SuccessFilled /></el-icon>
                            <el-checkbox v-else /> 婚假
                        </el-text>
                        <el-text>
                            　　<el-icon v-if="ruleForm.type == '丧假'"><SuccessFilled /></el-icon>
                            <el-checkbox v-else /> 丧假
                        </el-text>
                        <el-text>
                            　　<el-icon v-if="ruleForm.type == '工伤'"><SuccessFilled /></el-icon>
                            <el-checkbox v-else /> 工伤
                        </el-text>
                        <el-text>
                            　　<el-icon v-if="ruleForm.type == '产假'"><SuccessFilled /></el-icon>
                            <el-checkbox v-else /> 产假
                        </el-text>
                        <el-text>
                            　　<el-icon v-if="ruleForm.type == '护理假'"><SuccessFilled /></el-icon>
                            <el-checkbox v-else /> 护理假
                        </el-text>
                        <el-text>
                            　　<el-icon v-if="ruleForm.type == '其他'"><SuccessFilled /></el-icon>
                            <el-checkbox v-else /> 其他
                        </el-text>
                    </div>
                    <!-- <el-radio-group v-model="ruleForm.type">
                        <el-radio value="事假">事假</el-radio>
                        <el-radio value="病假">病假</el-radio>
                        <el-radio value="婚假">婚假</el-radio>
                        <el-radio value="丧假">丧假</el-radio>
                        <el-radio value="工伤">工伤</el-radio>
                        <el-radio value="产假">产假</el-radio>
                        <el-radio value="护理假">护理假</el-radio>
                        <el-radio value="其他">其他</el-radio>
                    </el-radio-group> -->
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label" class-name="my-content" :span="3">
                    <template #label>
                        <div class="cell-item">请假事由　</div>
                    </template>
                    <div style="height: 60px;"><el-text>{{ ruleForm.reason }}</el-text></div>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label" class-name="my-content" :span="3">
                    <template #label>
                        <div class="cell-item">请假时间　</div>
                    </template>
                    <el-text>{{ ruleForm.start_time }}至{{ ruleForm.end_time }}；共计{{ ruleForm.duration }}天</el-text>
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions direction="vertical" class="mt20" :column="5" border size="small">
                <el-descriptions-item label="请假本人签字及日期" label-class-name="my-label" class-name="my-content">　　</el-descriptions-item>
                <el-descriptions-item label="项目意见" label-class-name="my-label" class-name="my-content">　　</el-descriptions-item>
                <el-descriptions-item label="综合办" label-class-name="my-label" class-name="my-content">　　</el-descriptions-item>
                <el-descriptions-item label="总经理" label-class-name="my-label" class-name="my-content">　　</el-descriptions-item>
                <el-descriptions-item label="备注" label-class-name="my-label" class-name="my-content">　　</el-descriptions-item>
            </el-descriptions>
            <el-form-item label-class-name="my-label" class-name="my-content"  >
                <div style="width: 100%;border: 0.5px solid rgb(232 232 232);border-bottom:none;"><el-text>备注 1.有薪假必须出具相关证明，且需综合办审核确认（若请假时未出具证明，则需再填写《有薪假申请单》附证明进行有薪假申请审批；</el-text></div>
                <div style="width: 100%;border: 0.5px solid rgb(232 232 232);border-bottom:none;"><el-text>2.请假单分为存根与正本，存根由企管部存档，作为统计考勤时的依据，正本由员工所在部门存档，作为考勤疑问核对的依据；</el-text></div>
                <div style="width: 100%;border: 0.5px solid rgb(232 232 232)"><el-text>3.有薪假的相关证明复印件作为请假单附件一起存档。</el-text></div>
            </el-form-item>
        </div>
        <div class="text-center mt30">
            <el-button @click="printElement('print')"> 打印 </el-button>
            <el-button type="info" @click="type = false"> 返回 </el-button>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { SuccessFilled } from '@element-plus/icons-vue'
import { reactive, ref,watch } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import projectSelect from "@/components/projectSelect.vue";
import { PrinterService } from '../util/printer'
import http from '../util/request';
let user:any = sessionStorage.getItem('user')
user = JSON.parse(user)
const type = ref<boolean>(false)
const printer = new PrinterService()
const loading = ref<boolean>(false)
interface RuleForm {
    id: number
    project_id:number
    type:string
    duration:number
    reason:string
    position:string
    start_time:string
    end_time:string
    user:any
    project:any
    created_at:string
}

const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id: 0,
    project_id:0,
    type:'',
    duration:0,
    reason:'/',
    position:'/',
    start_time:'',
    end_time:'',
    user:{},
    project:{},
    created_at:''
})

const onGetData = () => {
    if(!ruleForm.value.id){
        return
    }
    http.get('/leave/'+ruleForm.value.id).then((response:any)=>{
        if(response.data.data){
            ruleForm.value = response.data.data
        }
        
    })
}

const onChangeDate = () => {
    const start_time:any = new Date(ruleForm.value.start_time);
    const end_time:any = new Date(ruleForm.value.end_time);

    // 计算日期差值（毫秒）
    const timeDiff = Math.abs(end_time - start_time);

    // 将差值转换为天数
    ruleForm.value.duration = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
}


const props = defineProps<{
    data:any
    type:boolean
}>()

watch(props,()=>{
    ruleForm.value.id = props.data
    type.value = props.type
    onGetData()
},{ immediate: true })

const rules = reactive<FormRules<RuleForm>>({
    type: [
        { required: true, message: '请选择请假类型', trigger: 'blur' },
    ],
    start_time: [
        { required: true, message: '请选择开始时间', trigger: 'blur' },
    ],
    end_time: [
        { required: true, message: '请选择结束时间', trigger: 'blur' },
    ],
    reason: [
        { required: true, message: '请输入原因', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if(!ruleForm.value.type){
            ElMessage.error('请选择请假类型');
            return
        }
        if(!ruleForm.value.start_time){
            ElMessage.error('请选择开始时间');
            return
        }
        if(!ruleForm.value.end_time){
            ElMessage.error('请选择结束时间');
            return
        }
        if(!ruleForm.value.reason){
            ElMessage.error('请输入原因');
            return
        }
       
        if (valid) {
            loading.value = true
            let request:any = null
            if(ruleForm.value.id){
                request = http.patch('/leave',ruleForm.value)
            }else{
                request = http.put('/leave',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                onSave()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}


const printElement = (elementId:string) => {
    if(elementId){
        printer.printElement(elementId, { title: '　' })
        return;
    }
    type.value = true
}


const onProjectSelect = (data:number) => {
    ruleForm.value.project_id = data
}

const onSave = () => {
    emit('onSave')
}

const emit = defineEmits(['onSave'])
</script>
<style scoped>
.print{width: 210mm;size: A4;margin:0px auto;padding: 0px 15px 0px 15px;}
.el-tab-pane{height: calc(100vh - 25vh);overflow-y: scroll;}
::v-deep .el-form-item .el-form-item__label {
  font-size: 16px; /* 或者你想要的任何大小 */
}
::v-deep .el-tabs__item{font-size: 18px !important;}
.cell-item{width:70px;text-align: center;}
.w-f{width: 78px;}
:deep(.my-label) {
  padding: 2px 4px !important;
  font-size: .8rem !important;
}

:deep(.my-content) {
    padding: 2px 4px !important;
}
</style>
